import {connect} from 'react-redux'
import {saveUserAsyncAction} from '@/store/action/user'
import React, {Component} from 'react'
import {Form, Input, Radio, Button, message, Typography, Alert} from 'antd'

const {TextArea} = Input;
const {Title} = Typography;

class UserEdit extends Component {
    render() {
        const {userInfo, count} = this.props
        return (
            <div className={'user-edit'}>
                <Title>用户编辑组件</Title>
                <Alert message={'用户点赞数：' + count} type="success"/>
                <Form
                    name="basic"
                    labelCol={{span: 2}}
                    wrapperCol={{span: 8}}
                    autoComplete="off"
                    initialValues={userInfo}
                    onFinish={this.onFinish}
                >
                    <Form.Item
                        label="用户名称"
                        name="username"
                        rules={[{required: true, message: '请输入用户名称'}]}
                    >
                        <Input placeholder="请输入用户名称" allowClear/>
                    </Form.Item>
                    <Form.Item
                        label="用户性别"
                        name="sex"
                    >
                        <Radio.Group name="sex">
                            <Radio value={1}>男</Radio>
                            <Radio value={0}>女</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="用户手机"
                        name="phone"
                        rules={[{required: true, message: '请输入用户手机'}]}
                    >
                        <Input placeholder="请输入用户手机" allowClear/>
                    </Form.Item>
                    <Form.Item
                        label="用户签名"
                        name="sign"
                    >
                        <TextArea placeholder={'请输入用户签名'}/>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 2, span: 8}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }

    //表单提交
    onFinish = async (values) => {
        const hide = message.loading({content: '数据同步中...'})
        await this.props.saveUserAsync(values)
        hide();
    }
}

// 传递参数给UI组件
const mapStateToProps = (state) => ({
    userInfo: state.user,
    count: state.count
})
// 传递方法给UI组件 对象法
const mapDispatchToProps = {saveUserAsync: saveUserAsyncAction}
export default connect(mapStateToProps, mapDispatchToProps)(UserEdit);
